import React, { useMemo, useRef, useState } from 'react';
import { Layout, OType, Panel, WorkFlowPanel, flexStyle, udp } from '@cscec/udp-ui';
import type { IProps } from './interface';
import IndicatorCenterCard from '@/components/editor/plugin/portal/IndicatorCenter/component/indicatorCenterCard';

/**
 * 通用帮助
 * @param param
 * @returns
 */
export default function DetailPage({
  busType, forms, tabs: tabItems, render, toolbar, style, extraData, data, env
}: IProps) {
  console.log('[debug] detaiPage fc: ', arguments);
  const tabs = udp.isArray(tabItems) ? tabItems : [tabItems];
  tabs[0].tabs = (tabs[0].tabs || []).filter((tab)=> tab.body.length > 0);  //先过滤掉内容为空的选项卡
  const showTabs = env.session === 'design' || tabs[0]?.tabs?.length > 0;
  const isPreview = env.session === 'preview';

  const newForms =
    forms?.map((form: any) => ({
      ...form,
      body: Array.isArray(form.body) ? extendBody(form.body) : form.body,
      formProps: form.name ? { ...form.formProps, id: `${busType}_${form.name}` } : form.formProps
    })) || [];
  // console.log('[debug] detaiPage fc: ', newForms, tabs);
  const disabled = ![OType.Add, OType.Edit].includes(udp.getQueryValue('oType') || OType.Add);
  const disabledKeys = useMemo(() => {
    return disabled ? ['save', 'check'] : [];
  }, [disabled]);

  const isLocal = useRef(location.hostname == 'localhost');

  return (
    <Layout direction='row' autoFit style={{ backgroundColor: 'var(--body-background, #f0f2f5)', padding: 'var(--outer-margin, 16px)', pointerEvents: 'auto', ...style }}>
      <Layout.Flex direction='column'>
        <Panel title={udp.getQueryValue('appTitle')}
          extra={render('toolbar', toolbar || {}, { id: `${busType}_toolbar`, disabledKeys, rightName: busType, showIcon: false, style: { padding: 0, width: 'auto' } })} />
        {/* <WorkFlowPanel toolbar={`${busType}_toolbar`} /> */}
        {busType && extraData?.capacity?.metricsFlag == 1 && 
          <div>
            {isLocal ? <div className="test_123"> 本地环境不展示指标中心 </div> :
              <IndicatorCenterCard
                data={{
                  // params: indicatorCardParams,
                  params: data.stateData,
                  userInfo: udp.getUser(),
                  bizCode: busType,
                  oType: udp.getQueryValue('oType'),
                  controlCategory: 2,
                  page: extraData.page,
                }}
              />
            }
          </div>
        }
        <div style={{ pointerEvents: `${isPreview ? 'none' : 'auto'}` }}>
          {render('forms', newForms)}
        </div>
        {showTabs ? <Layout.Flex style={{ ...flexStyle({}), pointerEvents: `${isPreview ? 'none' : 'auto'}` }}>
          {render('tabs', tabs)}
        </Layout.Flex> : null
        }
      </Layout.Flex>
      <WorkFlowPanel direction="vertical" toolbar="" />
    </Layout>
  );
}
const typeExtendPropsMap = {
  'udp-html-editor': {
    className: 'udp-html-editor'
  }
};
function extendBody(body: any[]) {
  return body.map((value) => ({
    ...value,
    ...(typeExtendPropsMap[value.type] || {}),
    body: Array.isArray(value.body) ? extendBody(value.body) : value.body
  }));
}
